<template>
  <div class="login">
    <van-nav-bar
      right-text="取消"
      @click-right="onClickRight"
    />
    <div class="login-wrapp">
      <div class="login-logo">
        <img src="./images/logo-index.png" alt="">
        <van-divider class="textDivider">
          工程建设项目法规汇编
        </van-divider>
      </div>
      <div class="login-form">
        <div class="login-form-top">
          <van-form @submit="onSubmit" >
            <van-field
              v-model="userName"
              :rules="[{ required: true, validator: patternUserName, message: '请填写用户名', trigger: 'onChange' }]"
              name="userName"
              label="用户名"
              placeholder="用户名"
              clearable
            />
            <van-field
              v-model="userPassword"
              :rules="[{ required: true, validator: patternUserPassword, message: '请填写密码' }]"
              type="password"
              name="userPassword"
              label="密码"
              placeholder="密码"
              clearable
            />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">登陆</van-button>
            </div>
            <div style="margin: 32px 16px 16px 16px;">
              <van-button round block type="info" @click="jump()">还没有账号？去注册</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapActions } from 'vuex'
import JsMd5 from './../../utils/js-md5'
import Header from '../../components/Header/NoLeftArrowHeader'
import { login } from './../../api/user'

export default {
  name: 'Login',
  components: {
    Header
  },
  data() {
    return {
      userName: '',
      userPassword: ''
    }
  },
  methods: {
    ...mapActions('user', ['setUserInfo']),
    patternUserName(val) {
      return val
    },
    patternUserPassword(val) {
      return val
    },
    onClickRight() {
      this.$router.push('profile')
    },
    async onSubmit(values) {
      console.log('-----------')
      const { userName, userPassword } = values

      const { code, data, msg } = await login({
        userName,
        userPassword: JsMd5.encryption(userPassword),
        userType: 'user'
      })

      if (code === 0) {
        Toast.success({
          message: msg
        })
        this.setUserInfo(data).then(() => {
          this.$router.replace({ path: '/' })
        })
      } else {
        Toast.fail({
          message: msg
        })
      }
    },
    jump() {
      this.$router.push('register')
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.login {
  height: 100%;
  background-color: #70A0EC;

  .van-nav-bar {
    background-color: #70A0EC;

    /deep/ .van-nav-bar__right {
      .van-nav-bar__text {
        color: #FFFFFF;
      }
    }

    &:after {
      border-bottom-width: 0;
    }
  }

  .login-wrapp {
    position: fixed;
    top: 46px;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #70A0EC;

    .login-logo {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      height: 86px;
      padding: 12px 0;

      img {
        width: 250px;
        height: 50px;
      }

      .textDivider {
        color: #ffffff;
        border-color: #ffffff;
        padding: 0 16px;
        font-weight: bold
      }
    }

    .login-form {
      margin: 30px;
      box-sizing: border-box;
      background-color: #ffffff;

      .login-form-top {
        padding: 20px;
        box-sizing: border-box;

        /deep/ .van-cell__title{
          width: 50px;
        }
      }
    }
  }
}
</style>
